<template>
  <div>
    <p>
      <button v-on:click="list(1)" class="btn btn-app btn-light btn-xs">
        <i class="ace-icon fa fa-refresh bigger-160"></i>
        刷新
      </button>
      &nbsp;&nbsp;

    </p>
    <pagination ref="pagination" v-bind:list="list" v-bind:itemCount="8"></pagination>
    <table id="simple-table" class="table  table-bordered table-hover">
      <thead>
      <tr>
            <th>id</th>
    <th>相对路径</th>
    <th>文件名</th>
    <th>后缀</th>
    <th>大小</th>
    <th>用途</th>
      </tr>
      </thead>

      <tbody>
      <tr v-for="file in files">
              <td>{{file.id}}</td>
              <td>{{file.path}}</td>
              <td>{{file.name}}</td>
              <td>{{file.suffix}}</td>
              <td>{{file.size | formatFileSize}}</td>
              <td>{{FILE_USE | optionKV(file.use)}}</td>

      </tr>
      </tbody>
    </table>


  </div>
</template>
<script>
  import  Pagination from "../../components/pagination"
  export default {
    components: {Pagination},
    name: 'file-file',
    data: function () {
      return {
        file: {},
        files: [],
          FILE_USE:FILE_USE,
      }
    },
    mounted: function () {
      let _this = this;
      _this.$refs.pagination.size = 5;
      _this.list(1);
    },
    methods: {

      /**
       * 列表查询
       */
      list(page) {
        let _this = this;
        Loading.show();
        _this.$ajax.post(process.env.VUE_APP_SERVER+"/file/admin/file/list", {
          page: page,
          size: _this.$refs.pagination.size,
        }).then((response)=>{
          Loading.hide();
          let resp = response.data;
          _this.files = resp.content.list;
          //render 重新渲染组件
          _this.$refs.pagination.render(page, resp.content.total);
        })
      },

      /**
       * 点击删除
       * @param id
       */
      del(id) {
        let _this = this;
        Confirm.show("删除文件后不可恢复，确认？", function () {
          Loading.show();
          _this.$ajax.delete(process.env.VUE_APP_SERVER+"/file/admin/file/delete/" + id).then((response) => {
            Loading.hide();
            let resp = response.data;
            if (resp.success) {
              _this.list(1);
              Toast.success("删除成功!")
            }
          })
        });

      }
    }

  }

</script>